<!-- QuestionCard.vue -->
<template>
  <div class="question-card">
    <h2 class="mb-4 text-left">
      {{ title }}
    </h2>

    <div
      v-for="(question, index) in questions"
      :key="question.id"
      class="card mb-4"
    >
      <div class="card-body text-left">
        <!-- 题目内容（左对齐） -->
        <h5 class="card-title mb-3">
          题目 {{ index + 1 }}: 
          <span v-if="isMultipleChoice(question)">{{ question.stem }}</span>
          <span v-else>{{ question.content }}</span>
        </h5>

        <!-- 类型与分数（左对齐） -->
        <div class="card-content">
          <p class="mb-2">
            类型：{{ question.type === 0 ? '选择题' : '简答题' }}<br>
            分数：{{ question.score }}分
          </p>

          <!-- 选择题选项（左对齐列表） -->
          <div
            v-if="isMultipleChoice(question)"
            class="options-container"
          >
            <p class="mb-2">
              选项：
            </p>
            <div class="options-list">
              <div
                v-for="(option, idx) in getOptionsWithPrefix(question)"
                :key="idx"
                class="option-item"
              >
                {{ option }}
              </div>
            </div>
            <p class="mt-2">
              答案：{{ question.answer || '暂无答案' }}
            </p>
          </div>

          <!-- 简答题参考答案（左对齐） -->
          <div
            v-else
            class="short-answer"
          >
            <p class="mb-2">
              参考答案：{{ question.answer || '暂无参考答案' }}
            </p>
          </div>
        </div>

        <!-- 操作按钮（右对齐，保持交互习惯） -->
        <div class="card-actions mt-3 text-right">
          <slot
            name="action"
            :question="question"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionCard',
  props: {
    title: {
      type: String,
      required: true
    },
    questions: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 判断是否为选择题
    isMultipleChoice(q) {
      return q.type === 0;
    },

    // 获取带 A/B/C/D 前缀的选项
    getOptionsWithPrefix(q) {
      if (!Array.isArray(q.options) || q.options.length === 0) return [];
      return q.options.map((opt, i) => `${String.fromCharCode(65 + i)}. ${opt}`);
    }
  }
};
</script>

<style scoped>
/* 卡片整体样式 */
.question-card {
  max-width: 800px;
  margin: 0 auto;
}

/* 卡片内容块 */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-body {
  padding: 1.5rem;
  text-align: left; /* 强制左对齐 */
}

/* 题目标题 */
.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

/* 内容区域 */
.card-content {
  line-height: 1.6;
  color: #374151;
}

/* 选择题选项列表 */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 选项间距 */
  margin: 0.5rem 0;
}

.option-item {
  padding-left: 1.5rem; /* 缩进对齐选项前缀 */
  position: relative;
}

/* 简答题内容 */
.short-answer {
  margin: 0.5rem 0;
}

/* 操作按钮区域（保持右对齐） */
.card-actions {
  margin-top: 1rem;
}

.cancel-btn { /* 继承CollectingExercise的按钮样式 */
  background-color: #ff4949;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: opacity 0.2s;
}

.cancel-btn:hover {
  opacity: 0.8;
}
</style>
